<template>
  <div class="base_info">
    <div class="base_img">
      <img :src="baseInfo.coverImg" alt="" />
    </div>
    <div class="base_info_right">
      <div class="base_item_top">
        <h3>
          <b-tag color="var(--main-color)" plain>歌单</b-tag>
          {{ baseInfo.name }}
        </h3>
        <div class="base_item_right">
          <div class="base_songnum">
            <span class="base_left">歌曲数量</span>
            <span>{{ baseInfo.trackCount }}</span>
          </div>
          <div class="base_playnum">
            <span class="base_left">播放数量</span>
            <span>{{ getPlayCount }}</span>
          </div>
        </div>
      </div>
      <div class="right-item">
        <b-avatar :src="baseInfo.creatorAvatar" size="30px"></b-avatar>
        <span class="creator-name">{{ baseInfo.creatorName }}</span>
        <span>创建时间:{{ getCreateDate }}</span>
      </div>
      <div class="right-item">
        <b-button background="var(--main-color)" color="#fff" round class="button" @click="handlePlayAll"> <i class="iconfont icon-bofang" />播放全部 </b-button>
        <el-button type="danger" :disabled="baseInfo.subscribedId" @click="handleCollector">
          <i class="iconfont icon-shoucang" />
          收藏({{ baseInfo.subscribedCount }})
        </el-button>
        <b-button round class="button">
          <i class="iconfont icon-fenxiang" />
          分享({{ baseInfo.shareCount }})
        </b-button>
      </div>
      <div class="desc">
        <p>
          标签:
          <span>{{ getTages }}</span>
        </p>
        <p class="desc-title">简介:{{ baseInfo.description }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from '../../../utils/formatDate'
export default {
  name: 'BaseInfo',
  props: {
    baseInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      isTime: 1
    }
  },
  computed: {
    getCreateDate() {
      return formatDate(new Date(this.baseInfo.time), 'yyyy-MM-dd')
    },
    getPlayCount() {
      return this.baseInfo.playCount && this.baseInfo.playCount.toString().slice(0, 2) + '万'
    },
    getTages() {
      return this.baseInfo.tags && this.baseInfo.tags.join('/')
    }
  },
  methods: {
    handlePlayAll() {
      this.$emit('playMusic')
    },
    handleCollector() {
      if (this.isTime < 2) {
        this.$emit('collector')
        this.isTime++
      }
    }
  }
}
</script>

<style lang="less" scoped>
.base_info {
  height: 200px;
  width: 100%;
  display: flex;
  .base_img {
    width: 18%;
    img {
      width: 100%;
    }
  }
  .base_info_right {
    flex: 1;
    padding-left: 30px;
    .base_item_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      padding-right: 20px;
      .base_songnum,
      .base_playnum {
        span {
          font-size: 14px;
        }
        .base_left {
          padding-left: 6px;
        }
      }
    }
    .right-item {
      width: 100%;
      padding-bottom: 8px;
      display: flex;
      align-items: center;
      font-size: 14px;
      .creator-name {
        padding: 0 8px;
      }
      .button {
        margin: 0 10px;
      }
    }
    .desc {
      padding: 10px 0px;
      font-size: 13px;
      span {
        color: var(--tag-color);
      }
      .desc-title {
        padding-top: 5px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }
  }
}
</style>
